Midterm Quiz

float example

Floats

Instructions:

  1. Give the section with the class float a 700 pixel width and center it. Hint. The section is a block element, so text-align: center; does not work.
  2. Add a 3 pixel grey border on the bottom of the header tag.
  3. Display the menu horizontally across the page.
  4. Remove the underline from the links and color them white. Color background red.
  5. Give links a 10 pixel margins, 10px 20px padding and set their display to inline-block.
  6. Style the hover green.
  7. The left and right columns are to be exactly 150 pixels wide. Color the background "silver".
  8. The center column is to be 400 pixels wide and the background is colored #ddd;.
  9. Using floats, position the three content boxes so that the web page is a 3 column layout.
  10. Add 20 pixel padding to all columns. Hint. All columns are divs.

Make the float layout responsive.

  1. When the screen goes below 700 pixels set media queries to true: @media screen and (max-width: 700px) {}
  2. Display the navigation list items as blocks.
  3. Set the width of navigation links to 100% and center the text. This works because the links are displayed as inline-blocks.
  4. Set column width to 100%. This stacks the floats.
  5. Add 10 pixel padding to the sides of section elements.

Part 2: Display Table

Display Header

Display Table

Display Table

Instructions:

  1. Keep the width and background color of the columns from above.
  2. Using the display property, turn these three content boxes into columns similar to the three column layout above.
  3. Display the container as a table and the three columns as table cells.
  4. Target the header specific to this section and color the background #ddd.

Make the layout responsive.

  1. When the screen goes below 600 pixels engage media queries: @media screen and (max-width: 600px)
  2. Target the columns and their container. Set display to block.
  3. When that didn't work as expected I had to add some persuasion. !important does the trick.

Right column

Part 3: Grid

Grid Header

Main content

Grid header

Grid Property

  1. Target the section with the class "gid" and display it as a grid with a 10 pixel grid-gap.
  2. Make grid horizontal with two grid flex units. Set the first to 1 and the second to 3: grid-template-columns: 1fr 3fr;
  3. Set the header and footer to span both columns: grid-column: 1 / -1;
  4. Select all elements inside of the grid and make the background silver, padding at 20 pixels, a 20 pixel margin on either side, and set the border-radius to 5 pixels. Hint, use universal selector to select the children.
  5. Target class header and set display to flex.
  6. Target the h1 inside the header and give it auto margins.
  7. put 1em of padding at the bottom of headings and paragraphs.

Make the grid responsive.

  1. Set a media query to activate when viewport is less than 500 pixels: @media screen and (max-width: 500px)
  2. Turn grid into display block.
  3. For what used to be the grid children, get rid of border radius and add a 5 pixel margin on the border;